import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:get/get.dart';
import 'package:yysk_app/model/user_prop_model/list_by_propId_history_model.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/custom_app_bar2.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'package:yysk_app/widget/lazy_network_image.dart';
import 'package:yysk_app/widget/video_player_screen_widget.dart';

class HandbookDetailPage extends StatefulWidget {
  static const path = '/HandbookDetailPage';
  const HandbookDetailPage({super.key});
  @override
  State<StatefulWidget> createState() => _HandbookDetailPage();
}

class _HandbookDetailPage extends State<HandbookDetailPage> {
  final ScrollController scrollController = ScrollController();
  int pageNum = 1;
  int pageSize = 10;
  final list = RxList<ListByPropIdHistoryItem>([]);
  late String? content;
  late String title;

  @override
  void initState() {
    super.initState();
    title = Get.arguments['title'] ?? Get.parameters['title'];
    content = Get.arguments['content'] ?? Get.parameters['content'];
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double top = MediaQuery.of(context).padding.top;
    return Scaffold(
      // backgroundColor: AppColors.backgroundColorBlack,
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: ImageAssetWidget(
              width: 375.px,
              height: 812.px,
              imageUrl: 'static/images/bg.png',
            ),
          ),
          Container(
            padding: EdgeInsets.fromLTRB(0, top, 0, 0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CustomAppBar2(
                  title: '$title',
                  context: context,
                  textColors: AppColors.fontColor,
                ),
                Expanded(
                  child: ListView(
                    padding: EdgeInsets.all(0),
                    children: [
                      Padding(
                        padding: EdgeInsets.only(
                          left: 25.px,
                          right: 25.px,
                          top: 0,
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            HtmlWidget(
                              '''
                          ${content}
                          
                    ''',
                              textStyle: const TextStyle(
                                color: AppColors.fontColorGrey,
                              ),
                              customWidgetBuilder: (element) {
                                if (element.localName == 'img') {
                                  return LazyImage(
                                    imageUrl: '${element.attributes['src']}',
                                    boxFit: BoxFit.fitWidth,
                                    width: context.width,
                                    aotuHeight: true,
                                  );
                                }
                                if (element.localName == 'video') {
                                  return CustomVideoPlayer(
                                    videoSource:
                                        '${element.attributes['poster']}', // 网络视频 URL
                                    autoPlay: false, // 不自动播放
                                    showControls: true, // 显示控制按钮
                                  );
                                }

                                return null;
                              },
                              customStylesBuilder: (element) {
                                if (element.localName == 'video') {
                                  return {
                                    'width': '${context.width}',
                                    'height': '${context.width / 16 * 9}',
                                  };
                                }

                                return null;
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
